<template>
  <div class="bottom-bar">
    <div class="check-content"
         @click="clickAll">
      <check-button class="check-all"
                    :is-checked="isSelectAll"/>
      <div>全选</div>
    </div>
    <div class="price">合计: {{ totalPrice }}</div>
    <div class="calculate">
      <div class="text" @click="calclick">去计算: ({{ checkedLength }})</div>
    </div>
  </div>
</template>

<script>
import checkButton from "components/content/checkButton/checkButton";
import {mapGetters} from 'vuex'
export default {
  name: "bottomBar",
  components: {
    checkButton
  },
  data() {
    return {
      // isChecked: false
    }
  },
  computed: {
    ...mapGetters(['cartList']),
    totalPrice() {
      return '￥' + this.$store.getters.cartList.filter(item => {
        return item.checked
      }).reduce((preValue, item) => {
        return preValue + item.price * item.count
      }, 0).toFixed(2)
    },
    checkedLength() {
      return this.$store.state.cartList.filter(item => item.checked).length
    },
    isSelectAll() {
      // return !(this.$store.getters.cartList.filter(item => !item.checked).length)
      if (this.$store.getters.cartList.length) {
        return !this.cartList.find(item => !item.checked)
      }
      return false
    }
  },
  methods: {
    clickAll() {
      // let tap = 0
      // if (this.isChecked) {
      //   for (let item of this.$store.getters.cartList) {
      //     if (!item.checked) {
      //       tap = 1
      //       break
      //     }
      //   }
      //   if (!tap)
      //     for (let item of this.$store.getters.cartList) {
      //       item.checked = false
      //     }
      // } else {
      //   for (let item of this.$store.getters.cartList) {
      //     item.checked = true
      //   }
      // }
      // this.isChecked = !this.isChecked
      if (this.isSelectAll) {
        this.cartList.forEach(item => item.checked = false)
      }else {
        this.cartList.forEach(item => item.checked = true)
      }
    },
    calclick(){
      if(!this.isSelectAll){
        this.$toast.show('请选择购买的商品')
      }
    }
  },
  mounted() {
    // this.$bus.$on('make',(p)=>{
    //   this.isChecked=p
    // })
  }

}
</script>

<style scoped>
.bottom-bar {
  height: 40px;
  background-color: #eee;
  position: relative;
  line-height: 40px;
  display: flex;
  font-size: 14px;
}

.check-content {
  display: flex;
  align-items: center;
  margin-left: 10px;
  width: 30%;
}

.check-all {
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
}

.price {
  margin-left: 5px;
  flex: 1;
}

.calculate {
  width: 25%;
  color: #fff;
  background-color: #ff5777;
}

.text {
  margin-left: 10px;
}
</style>
